<template>
    <div class="Operate">
        (没登陆的提示)
        <div class="title"
            v-if="!signed">
            <span class="titlebtn cur"
                @click="e_page_('signin')"
                v-text="LoginText" />
            <span class="titleText"
                v-text="orText" />
            <span class="titlebtn cur"
                @click="e_page_('signup')"
                v-text="RegsText" />
            <span class="titleText"
                v-text="doDealText" />
        </div>
        <!-- <div class="title user"
            v-if="signed">
            <div class="UserInfo">
                <span v-text="canUse" />
                <span>0.00000000</span>
                <span>USDT</span>
            </div>
            <span class="addB cur" v-text="addB" />
        </div> -->
        <div class="controlContainer">
            (价格输入框)
            <div class="formCon">
                <span class="inputTitle"
                    v-text="formUpTitle" />
                <div class="inputCon">
                    <input class="input"
                        type="number"
                        v-model="ipt_price">
                    <!-- <span class="inputText">USDT</span> -->
                </div>
                <!-- <div class="equal">
					≈
					<span>8.81</span>CNY
				</div> -->
            </div>
            (量输入框)
            <div class="formCon">
                <span class="inputTitle"
                    v-text="formDownTitle" />
                <div class="inputCon">
                    <input class="input"
                        type="number"
                        v-model="ipt_count" />
                    <!-- <span class="inputText">USDT</span> -->
                </div>
            </div>
        </div>
        <!-- <div class="rangeCon">
            <input class="range cur"
                type="range"
                min="0"
                max="100"
                v-model="a"
                step="0.0001" />
        </div> -->
        (估算出的交易额)
        <span class="trdeInfo">
            <span v-text="tradeText" />
            <span v-text="num_aboutAll">0.00000000</span>
            <!-- <span>USDT</span> -->
        </span>
        (检查两个数都没问题,展示密码输入)
        <div v-if="canShowPassword"
            class="form-password">
            <span class="inputTitle"
                v-text="labelPassword" />
            <div class="inputCon">
                <input class="input"
                    type="password"
                    v-model="ipt_password" />
                <!-- <span class="inputText">USDT</span> -->
            </div>
        </div>
        (买入卖出按钮)
        <div class="contrBtn cur"
            :class="btnColor"
            @click="e_trade">
            <span v-text="ContrlBtn" />
            <!-- <span>BCH</span> -->
        </div>

        (弹窗1-提示输入的信息不完整)
        <hb-dialog v-if="msgBack !== ''"
            class="dialog"
            @clk="e_closeDialog">
            <span v-text="msgBack">您输入的信息有误, 请检查后再操作</span>
        </hb-dialog>
    </div>
</template>

<script>
import {vpost, kpost, vlink} from '@api'

export default {
	name: 'Operate',
	props: {
		formUpTitle: {
			default: '',
		},
		formDownTitle: {
			default: '',
		},
		ContrlBtn: {
			default: '',
		},
		tradeText: {
			default: '',
		},
		LoginText: {
			default: '',
		},
		orText: {
			default: '',
		},
		RegsText: {
			default: '',
		},
		doDealText: {
			default: '',
		},
		isBuyIN: {
			default: false,
		},
		isSellIn: {
			default: false,
		},
		canUse: {
			default: '',
		},
		addB: {
			default: '',
		},
	},
	data() {
		return {
			isTrue: false,
			a: 0,
			ipt_price: '',
			ipt_count: '',
			ipt_password: '',
			showDialog1: false,
			showDialog2: false,
			msgBack: '',
		}
	},
	created() {},
	computed: {
		signed() {
			return this.$store.state.user.signed
		},
		num_aboutAll() {
			return this.numMulti(this.ipt_price,this.ipt_count)
		},
		lang() {
			return this.$store.state.setting.lang
		},
		labelPassword() {
			return this.lang == 'cn' ? '交易密码' : 'trade password'
		},
		canShowPassword() {
			let p = Number(this.ipt_price)
			let c = Number(this.ipt_count)
			let re = p !== 0 && c !== 0
			if (!re) {
				this.ipt_password = ''
			}
			return re
		},
		btnColor() {
			let isBuy = this.isBuyIN
			let isSell = this.isSellIn
			let re = ''
			if (isBuy) {
				re = 'btn-green'
			}
			if (isSell) {
				re = 'btn-red'
			}
			if (!this.canShowPassword) {
				re = 'btn-gray'
			}
			return re
		},
	},
	methods: {
		e_page_(s) {
			this.$router.push('/' + s)
		},
		e_trade() {
			if (this.$limitTimer()) {
				return
			}
			if (this.ipt_password === '') {
				return
			}
			const param = {
				tradeAmount: this.ipt_count,
				tradeCnyPrice: this.ipt_price,
				tradePwd: this.ipt_password,
				symbol: this.$store.state.trade.ftrademappingid,
			}
			
			const link = this.isBuyIN ? vlink.tradek.buy : vlink.tradek.sell
			vpost(link, param).then(re => {
				this.msgBack = re.msg
				setTimeout(() => {
					this.ipt_price = ''
					this.ipt_count = ''
					this.e_closeDialog()
				}, 1000)
			})
		},
		e_closeDialog() {
			this.msgBack = ''
		},
		numMulti(num1, num2) {
			var m = 0,
				r1,
				r2
			var s1 = num1.toString()
			var s2 = num2.toString()
			try {
				m += s1.split('.')[1].length
			} catch (e) {}
			try {
				m += s2.split('.')[1].length
			} catch (e) {}
			r1 = Number(num1.toString().replace('.', ''))
			r2 = Number(num2.toString().replace('.', ''))
			return r1 * r2 / Math.pow(10, m)
		},
	},
}
</script>
<style scoped>
.Operate {
	/* width: 580px; */
	width: 50%;
	font-size: 0;
}
.title {
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #1f2943;
}
.user {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.UserInfo {
	color: #c7cce6;
}
.addB {
	color: #7a98f7;
}
.titlebtn {
	color: #7a98f7;
	font-size: 14px;
}
.titleText {
	color: #c7cce6;
	font-size: 14px;
}
.formCon {
	margin-top: 20px;
}
.inputCon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	border: 1px solid #61688a;
	border-radius: 4px;
}
.inputTitle,
.inputText {
	color: #61688a;
	font-size: 14px;
	font-weight: 400;
}
.input {
	width: 100%;
	border: none;
	outline: 0px;
	font-size: 18px;
	color: #c7cce6;
}
.inputCon,
.input {
	background-color: #1e2235;
	height: 40px;
}
.input {
	margin-left: 17px;
}
/*去除input number框的上下选择按钮*/
.input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}
.inputText {
	margin-right: 17px;
}
.equal {
	height: 24px;
	background-color: #4e5b85;
	border-radius: 4px;
	color: #c7cce6;
	font-size: 14px;
	padding-left: 19px;
	line-height: 24px;
}
.rangeCon {
	margin-top: 10px;
	margin-bottom: 5px;
}
.range {
	-webkit-appearance: none;
	width: 100%;
	height: 4px;
	background-color: #262a42;
	outline: none;
	border: none;
	border-radius: 6px;
}
.range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 10px;
	width: 10px;
	background: #ffffff;
	border-radius: 50%; /*外观设置为圆形*/
	border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
	box-shadow: 0 0.125em 0.125em #3b4547; /*添加底部阴影*/
}
.trdeInfo {
	font-size: 16px;
	display: inline-block;
	color: #c7cce6;
	margin: 20px 0 0;
}
.contrBtn {
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: #4e5b85;
	border-radius: 4px;
	color: #c7cce6;
	margin-bottom: 20px;
	font-size: 16px;
}
.buyClass {
	background-color: #589065;
}
.btn-green {
	background-color: #589065;
}
.btn-red {
	background-color: #ae4e54;
}
.btn-gray {
	background-color: gray;
}
.sellClass {
	background-color: #ae4e54;
}
.form-password {
	margin: 20px 0;
}
.dialog {
	font-size: 16px;
}
</style>


